<!-- 视频列表组件，保护视频播放组件 -->
<template>
    <div class="video-list">
        <swiper :options="swiperOption">
    <!-- 幻灯内容 -->
    <swiper-slide v-for="(item,index) in dataList" :key="index">
		<div>
			<videos ref="videos" :videoList="item" :index="index"  @keydown="handleKeyDown"></videos>
		</div>

		<!-- 底部说明 -->
		<div class="infobar_warp">
			<div class="info-bar">
				<div class="infobar-item"><span>@{{ item.authorName }}</span></div>
				<div class="infobar-item"><span>{{ item.title }}</span></div>

			</div>
		</div>

		<!-- 右侧列表 -->
		<div class="right_warp">
			<!-- 父组件接收子组件的方法 -->
			<div class="rightBar">
				<div class="rightBar-item">
					<div class="avatar-border">
						<img :src="item.authorImage" alt="">
						<span class="iconfont icon-wuuiconxiangjifangda"></span>
					</div>
				</div>
				<!-- 点赞 -->
				<div class="item-icon">
					<span class="iconfont icon-aixin"></span>
					<p>{{ item.likes }}</p>
				</div>
				<!-- 评论 -->
				<!-- 当单击评论和评论图标时，将弹出评论信息 -->
				<div class="item-icon" @click="showCom">
					<span class="iconfont icon-pinglun"></span>
					<p>{{ item.reply }}</p>
				</div>
				<!-- 分享 -->
				<div class="item-icon">
					<span class="iconfont icon-fenxiang"></span>
					<p>{{ item.forward }}</p>
				</div>
				<div class="rightBar-item1">

				</div>
			</div>
		</div>
			<!-- 评论 -->
			<transition name="up">
				<div class="comment-warp-box" v-if="showComment">
					<div class="comment-warp">
						<div class="comment-list">
							<div class="comment-top">
								<div class="number">15.0w条评论</div>
								<div class="close" @click="close"><span class="iconfont icon-shanchu"></span></div>
							</div>
							<div class="comment-body">
								<div class="comment-box">
									<div class="comment-item">
										<div class="user-pic">
											<img src="../../../public/images/head1.jpg" alt="">
										</div>
										<div class="item-info">
											<div class="reply">
												<p class="name">安安</p>
												<p class="reply-des">要加班今晚要加班要加班今晚要加班要加班今晚要加班要加班今晚要加班<span class="time">05-20</span></p>
											</div>
											<div class="zan">
												<span class="iconfont icon-aixin"></span>
												<p>200</p>
											</div>
										</div>
									</div>
									<!-- 回复 -->
									<div class="sub-comment-item">
										<div class="user-pic">
											<img src="../../../public/images/head1.jpg" alt="">
										</div>
										<div class="item-info">
											<div class="reply">
												<p class="name">拉西</p>
												<p class="reply-des">
													<span>回复</span>
													<span class="re-name">安安：</span>
													<span>123</span>
													<span class="time">05-20</span>
												</p>
											</div>
											<div class="zan">
												<span class="iconfont icon-aixin"></span>
												<p>200</p>
											</div>
										</div>
									</div>
									<!-- 回复条数 -->
									<div class="more">展开更多回复</div>



									<!-- 评论框 -->
									<div class="reply-input">
										<input type="text" id="" placeholder="留下你精彩的评论">
										<span class="emoji">@</span>
										<span class="iconfont icon-pinglun"></span>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</transition>
	</swiper-slide>
</swiper>








    </div>
</template>
<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'    //导入组件
    import 'swiper/swiper-bundle.css'
	import Videos from './Videos'
	// import InfoBar from './InfoBar.vue'
	// import RightBar from './RightBar.vue'

	export default{
        name:'videoList',
        components: {
            SwiperSlide,          //定义组件
            Swiper,
			Videos,
			// InfoBar,
			// RightBar
        },

        data(){
            return {
				showComment:false,
				page:1,
                swiperOption: {
                    direction:"vertical",
                    grabCursor: true,
                    setWrapperSize: true,
                    autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                    slidesPerView: 1,
                    mousewheel: true,
                    mousewheelControl: true,
                    height: window.innerHeight,  //高度设置，占满设备高度
                    resistanceRatio: 0,
                    observeParents: true,

					// 实现暂停功能
					on:{
						tap:()=>{
							this.playAction(this.page - 1)
						},
						//详见：https://www.swiper.com.cn/api/event/290.html
						slideNextTransitionStart:()=>{
						this.page +=1;
							this.nextVideo(this.page - 1)
						},
						slidePrevTransitionEnd: ()=>{
						if(this.page>1){
								this.page -=1;
								this.preVideo(this.page - 1)
							}
						},
					}
                },
				dataList:[]


            }

        },

		created() {
					this.queryVideo();
		},
		mounted() {
			this.keyDown()

		},

		methods:{
			queryVideo(){
				let url = 'http://localhost:8081/video/selectAllVideo'
				this.axios.get(url).then((response) => {
					if (response.data.code===1){
						// localStorage.user = JSON.stringify(response.data.data);
						this.dataList= response.data.data;
					}else {
						this.$message.error("获取视频异常");
					}
				});
			},
			handleKeyDown(event) {
				if (event.keyCode === 38) { // 上键
					this.playAction(this.page - 1)
					this.page -= 1;
					this.preVideo(this.page - 1);

				} else if (event.keyCode === 40) { // 下键
					this.playAction(this.page - 1)
					this.page += 1;
					this.nextVideo(this.page - 1);

				}
			},
			// 监听键盘
			keyDown() {
				document.onkeydown =  (e) => {
					//事件对象兼容
					let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
					//键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
					//左
					if (e1 && e1.keyCode == 38) {
						// 按下左箭头
						console.log("上")
					} else if (e1 && e1.keyCode == 40) {
						// 按下右箭头
						console.log("下")
					}
				}
			},

			playAction(index){
				this.$refs.videos[index].playOrStop()
			},
			// 上滑
			preVideo(index){
				this.$refs.videos[index+1].stop()
				this.$refs.videos[index].play()
			},
			// 下滑
			nextVideo(index){
				this.$refs.videos[index-1].stop()
				this.$refs.videos[index].play()
			},

			// 弹出评论框
			showCom(){
				this.showComment=true;
			},
			// 关闭评论框
			close(){
				this.showComment=false;
			}


		}

     }

</script>

<style scoped>
    .video-list{
    height:100%;
    }
    .swiper-container{
    height:100%;
    position: relative;
    }
    .infobar_warp{
		position: absolute;
		bottom: 80px;
		left: 0;
	}
	.right_warp{
		position: absolute;
		bottom: 60px;
		right: 0;
	}
	/* 评论部分样式 */
	/* 点击评论  向上滑动的动画 */
	.up-enter-active, .up-leave-active {
	transition: all .5s;
	}
	.up-enter, .up-leave-to{
	opacity: 1;
	transform: translateY(100%);
	}

	.comment-warp-box{
		position: fixed;
		bottom: 50px;
		left: 0;
		height: 500px;
		width: 100%;
		z-index: 88;
		background: #ffffff;
	}
	.comment-warp{
		position: fixed;
		bottom: 55px;
		left: 0;
		height: 500px;
		width: 100%;
		background: #ffffff;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		z-index: 99;
		padding: 10px 10px;
		box-sizing: border-box;
	}
	.comment-top{
		display: flex;
		align-items: center;
	}
	.number{
		flex:1;
		text-align: center;
	}
	.close{
		padding-right:10px;
		font-size: 20px;
		color:#666;
	}
	.comment-body{
		max-height: 450px;
		overflow: scroll;
		margin-top: 20px;
	}
	.comment-item{
		display: flex;
	}
	.user-pic{
		width: 33px;
		height: 33px;
	}
	.user-pic img{
		width: 33px!important;
		height: 33px;
		border-radius: 50%;
	}
	.item-info{
		margin-left: 10px;
		display: flex;
		flex:1;
	}
	.reply{
		width: 90%;
	}
	.reply-des{
		line-height:24px;
	}
	.reply .name{
		color: #666;
		font-size: 14px;
		margin-bottom:10px;
	}
	.reply .time{
		color: #666;
	}
	.zan .iconfont{
		font-size: 20px;
		color: #CCCCCC;
		margin: 0 10px;
	}
	.zan p{
		color: #cccccc;
		margin-top: 5px;
	}
	.sub-comment-item{
		display: flex;
		margin-left:33px ;
		margin-top: 10px;
	}
	.re-name{
		padding: 0 10px;
		color:#666;
	}
	.more{
		margin-top: 20px;
		text-align: center;
	}
	.reply-input{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		align-items: center;
		display: flex;
	}
	.reply-input input{
		line-height: 40px;
		width: 70%;
		border: none;
		outline:none;
		padding: 0 10px;
	}
	.reply-input .emoji{
		font-size: 26px;
		color: #cccccc;
		margin-right: 6%;
	}
	.reply-input .iconfont{
		font-size: 26px;
		color: #cccccc;

	}
		.info-bar{
			color:#FFFFFF;
			font-size: 16px;
			padding-left: 10px;
		}
		.info-bar .infobar-item{
			padding: 5px 0;
		}

		@keyframes scroll{
			from{
				transform: translateX(0);
			}
			to{
				transform: translateX(calc(-50% - 20px));
			}
		}
		.rightBar{
			width: 80px;
			text-align: center;
		}
		.rightBar rightBar-item{
			height: 60px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.avatar-border{
			height: 50px;
			border-radius: 50%;
			position: relative;
			text-align: center;
		}
		.avatar-border img{
			width: 49px;
			height: 49px;
			border-radius: 50%;
		}
		.avatar-border .icon-wuuiconxiangjifangda{
			color:#FE2C5A;
			position: absolute;
			top:40px;
			left:0;
			right:0;
		}
		.rightBar .item-icon{
			height: 60px;
			text-align: center;
			padding-top: 12px;
		}
		.item-icon .iconfont{
			color: #ffffff;
			font-size: 30px;
		}
		.item-icon p{
			color:#ffffff;
			font-size: 14px;
			padding-top: 5px;
		}
		.rightBar-item1{
			padding-top: 30px;
		}


		@keyframes round{
			0%{transform: rotate(0deg);}
			100%{transform: rotate(360deg);}
		}
</style>
